<template>
  <div>
    <el-row style="margin-left:-13px;">
      <el-tooltip effect="light" content="目的港账单" placement="top">
        <img v-if="portdestination0" :src="portdestination0" />
      </el-tooltip>
      <el-tooltip effect="light" placement="left">
        <div slot="content">
          <div
            v-html="data['sysRemark']"
            style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
          ></div>
          <!-- <el-table
              :data="sysReamrkData"
              style="width:600px;overflow:auto;"
              >
              <el-table-column
                prop="remark"
                label="系统备注"
                >
              </el-table-column>
            </el-table> -->
        </div>
        <i
          style="font-size:20px"
          @mouseover="initSysRemark"
          class="el-icon-s-flag"
        ></i>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

import deliveryPng from "@/assets/images/delivery.png";
import undeliveryPng from "@/assets/images/undelivery.png";
import tdGreenPng from "@/assets/images/tdGreen.png";
import yesbillstatusPng from "@/assets/images/yesbillstatus.png";
import nobillstatusPng from "@/assets/images/nobillstatus.png";
import portdestination0Png from "@/assets/images/portdestination0.png";
import portdestination1Png from "@/assets/images/portdestination1.png";
import payforcustomsdeclarationPng from "@/assets/images/payforcustomsdeclaration.png";
import payforcustomsdeclarationbluePng from "@/assets/images/payforcustomsdeclarationblue.png";
import payforcustomsdeclarationgreenPng from "@/assets/images/payforcustomsdeclarationgreen.png";
import generalgreendeclarationPng from "@/assets/images/generalgreendeclaration.png";
import generalbusinessdeclarationPng from "@/assets/images/generalbusinessdeclaration.png";
import waybillyesvatPng from "@/assets/images/waybillyesvat.png";
import waybillnovatPng from "@/assets/images/waybillnovat.png";
import waybillredvatPng from "@/assets/images/waybillredvat.png";
import fang1Png from "@/assets/images/fang1.png";
import fang2Png from "@/assets/images/fang2.png";
import mergerdeclarationPng from "@/assets/images/mergerdeclaration.jpeg";
import nosignExaminePng from "@/assets/images/nosignExamine.png";
import yessignExaminePng from "@/assets/images/yessignExamine.png";
import onlineinqury1Png from "@/assets/images/onlineinqury1.png";
import onlineinqury0Png from "@/assets/images/onlineinqury0.png";
import ispva1Png from "@/assets/images/ispva1.png";
import ispva0Png from "@/assets/images/ispva0.png";
import qing1Png from "@/assets/images/qing1.png";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      sysReamrkData: [],
      //  提
      delivery: deliveryPng,
      //  送
      undelivery: undeliveryPng,
      // TD
      tdGreen: tdGreenPng,
      //  起 - yes
      yesbillstatus: yesbillstatusPng,
      //  起 - no
      nobillstatus: nobillstatusPng,
      //  目
      portdestination0: portdestination0Png,
      //  目
      portdestination1: portdestination1Png,
      // 报
      payforcustomsdeclaration: payforcustomsdeclarationPng,
      // 报
      payforcustomsdeclarationblue: payforcustomsdeclarationbluePng,
      // 报
      payforcustomsdeclarationgreen: payforcustomsdeclarationgreenPng,
      // 报
      generalgreendeclaration: generalgreendeclarationPng,
      // 报
      generalbusinessdeclaration: generalbusinessdeclarationPng,
      // VAT
      waybillyesvat: waybillyesvatPng,
      // VAT
      waybillnovat: waybillnovatPng,
      // VAT
      waybillredvat: waybillredvatPng,
      // 放
      fang1: fang1Png,
      // 放
      fang2: fang2Png,
      // 合
      mergerdeclaration: mergerdeclarationPng,
      // 查
      nosignExamine: nosignExaminePng,
      // 查
      yessignExamine: yessignExaminePng,
      // 询
      onlineinqury1: onlineinqury1Png,
      // 询
      onlineinqury0: onlineinqury0Png,
      // PVA
      ispva1: ispva1Png,

      // PVA
      ispva0: ispva0Png,
      // 清
      qing1: qing1Png,
      systemReamrk: ""
    };
  },

  methods: {
    initSysRemark() {
      this.sysReamrkData = [];
      var systemReamrks = this.data["sysRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.sysReamrkData.push(sysRemark);
        });
      }
    },
    initShow(portOfDestinationBillStatus) {
      if (
        null != portOfDestinationBillStatus &&
        portOfDestinationBillStatus == 0
      ) {
        this.portdestination0 = portdestination0Png;
      } else {
        this.portdestination0 = portdestination1Png;
      }
    }
  },
  mounted() {
    this.systemReamrk = this.data["sysRemark"];
    const portOfDestinationBillStatus = this.data[
      "portOfDestinationBillStatus"
    ];
    this.initShow(portOfDestinationBillStatus);
  }
};
</script>

<style>
.top {
  text-align: center;
}
</style>
